<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
	<!--垂直方向对象属性 vertical-align
		使用方法：1.用于表格中单元格垂直居中
		         2.用于行内元素以及行内块元素
				   【文本和图片垂直居中（对齐）效果】
		对齐分为四种：基线对齐、顶部对齐、居中对齐、底部对齐
		元素种类：块元素、行元素、行内块元素
		块元素特点：独占一行、设置宽高
		行元素特点：一行内显示、不可设置宽高
		网页：元素之间嵌套生成
		行元素与块元素可以任意嵌套
		前提：设置宽高---行套块
		             ---块套块    √
					 ---块套行    √
		前提：一行内显示---行套块   √ 
		            ---块套块     ×
					---块套行     √
					---行套行     √
		
		-->
		<style>
			 im g:nth-child(1){
				/*vertical-align: 默认基线对齐*/
				vertical-align: baseline;
			}
			/*问题：派生选择器，特点：找后代  p  img */
			 i mg:nth-child(2){
				/*vertical-align: baseline 顶部对齐*/
				vertical-align: top;
				width: 500px;
				height: 500px;
				background: palevioletred;
			}
			img.baseline{
				vertical-align: baseline;
			}
			img.top{
				vertical-align: top;
			}
			img.middle{
				vertical-align: middle;
			}
			img.bottom{
				vertical-align: bottom;
			}
		</style>
	</head>
	<body>
		<!-- 需求结构：4个p  嵌套文字： 图片叫什么名字
		                     文字后加img，设定宽高：25~100px
							 每个图片后加：基线对齐、顶部对齐、居中对齐、底部对齐
		-->
		<h1>文本与图片垂直属性</h1>
	<p>HelloKitty<img  class="baseline" src="img/HelloKitty.png" alt="HelloKitty" width="100px" height="200px"/>基线对齐</p>
	<p>布丁狗<img class="top" src="img/布丁狗.png" alt="布丁狗" width="200px" height="200px"/>顶部对齐</p>
	<p>美乐蒂<img class="middle" src="img/美乐蒂.png" alt="美乐蒂" width="200px" height="200px"/>居中对齐</p>
	<p>玉桂狗<img class="bottom" src="img/玉桂狗 .png" alt="玉桂狗" width="200px" height="200px" />底部对齐</p>
	<!-- css选择器--抓第一张图片......
	 思路：派生选择器：找后代+伪类选择器：添加效果[错误]
	 错误原因：html结构不符合派生特点：p包含4个img 
	 伪类选择器，4个img需要在一个p中
	 p img:nth-child(1)-->
	</body>
</html>